<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>云上旅行用户管理</title>
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <link rel="stylesheet" href="../Xadmin/css/xadmin.css">
  <link rel="stylesheet" href="../Xadmin/css/login.css">
  <link rel="stylesheet" href="../Xadmin/css/font.css">
  <script src="../layui/layui.js" charset="utf-8"></script>
  <script src="../JS/BaseJS.js" charset="utf-8"></script>
  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
<div style="margin-left: 10rem;margin-top: 1rem;margin-bottom: 0.5rem">
  id:
  <div class="layui-inline">
    <input class="layui-input" id="id" autocomplete="off"/>
  </div>
  标题:
  <div class="layui-inline">
    <input class="layui-input" id="Title" autocomplete="off"/>
  </div>
  <button class="layui-btn" data-type="reload" onclick="search()">搜索</button>
</div>
<!--表格 -->
<table class="layui-hide" id="UserTab" lay-filter="UserTab" >
</table>
<!--头部工具栏 -->
<script type="text/html" id="UserToolbar">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="UpUser">修改活动</button>
    <button class="layui-btn layui-btn-sm" lay-event="AddActivity">添加活动</button>
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delUser">删除活动</button>
  </div>
</script>
</body>
<script src="../layui/layui.js" charset="utf-8"></script>
<script>
  layui.use('upload',function (){//导入上传组件
    console.log("上传组件导入成功!")
  })
  layui.use('table', function () {
    var table = layui.table;
    var $ = layui.jquery
    var upload = layui.upload
    table.render({//动态加载表格
      elem: "#UserTab" //绑定表格
      , url: BaseUrl+"Activity/ActivityList"//请求地址
      , toolbar: '#UserToolbar'//头部工具栏
      , headers: {}//请求头 token写在这里
      , where: {
        Title: "",
        id: -1
      } //查询条件
      , defaultToolbar: ['filter', 'exports', 'print', {
        title: "提示"
      }]
      , title: "用户列表"//表名称
      , cols: [[
        {
          type: 'radio', fixed: 'left'
        } //单选
        , {field: "id", title: "编号", width: 80, fixed: "left", sort: true} //field:后端传入字段名，title:字段别名，width:宽度
        , {field: "Title", title: "标题", width: 160, fixed: "left", sort: true} //field:后端传入字段名，title:字段别名，width:宽度
        , {field: "Image", title: "图片", width: 130, fixed: "left", sort: true,templet: '#StatusTql'} //field:后端传入字段名，title:字段别名，width:宽度
        ,{field: "Context", title: "简介", width:400, fixed: "left", sort: true}

      ]]
      , page: true//开启分页
    });
    table.on('toolbar(UserTab)', function (obj) {
      var selectCol = table.checkStatus(obj.config.id);
      switch (obj.event) {
        case 'delUser'://删除用户
          layui.jquery.ajax({
            url:BaseUrl+"Activity/Activity",
            method:'delete',
            data:{
              id:selectCol.data[0].id
            },
            success:function (res){//成功回调
              var object =JSON.parse(res);
              layer.alert(object.msg);
              reload();//刷新
            }
          })//请求后端删除接口
          break;
        case 'UpUser'://修改用户信息
          localStorage.setItem("Uid1",selectCol.data[0].id)//将信息储存到localstorage
          localStorage.setItem("nickName1",selectCol.data[0].Title)//将信息储存到localstorage
          localStorage.setItem("phone1",selectCol.data[0].Image)
          localStorage.setItem("address1",selectCol.data[0].Context)
          layer.open({//弹窗打开页面
            type:2,
            skin:"layui-layer-demo",
            title:"修改用户信息",//标题
            anim:2,
            area:["700px","400px"],//高宽
            shadeClose:true,//右上角关闭按钮
            content:"UpActivity.html",//网页地址
            end:function (){//关闭后的回调
              reload();
            }
          })
          break;
        case 'AddActivity':
          layer.open({//弹窗打开页面
            type:2,
            skin:"layui-layer-demo",
            title:"添加活动",//标题
            anim:2,
            area:["700px","400px"],//高宽
            shadeClose:true,//右上角关闭按钮
            content:"AddActivity.html",//网页地址
            end:function (){//关闭后的回调
              reload();
            }
          })
          break;
      }
    })//头部工具栏
  })

  function reload() {//刷新页面
    var table = layui.table;
    table.reload('UserTab', {
      url: BaseUrl+"Activity/ActivityList"
      , request: {//往后端传入的参数的参数名称
        pageName: 'page',
        limitName: 'limit'
      }
      , where: {
        UName: "",
        id:-1
      }
      , page: {
        curr: 1//当前页码
      }
    })
  }
  function search() {//头部搜索按钮
    var table = layui.table;
    var id = $("#id").val();
    if (id==""){
      id = -1;
    }
    table.reload('UserTab', {
      url: BaseUrl+"Activity/ActivityList"
      , request: {//往后端传入的参数的参数名称
        pageName: 'page',
        limitName: 'limit'
      }
      , where: {
        Title: $("#Title").val(),
        id: id
      }
      , page: {
        curr: 1//当前页码
      }
    })
  }
</script>
<script type="text/html" id="StatusTql">  <!--状态模板 -->
<span><img src="{{d.Image}}"></span>
</script>
</html>